<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/tailwind/cdnjs/tailwind.min.css"></script>
</head>

<body>
    <div id="todo-app">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat"
                class=" border-2 border-gray-300 rounded-md p-2 w-full">
            <button>Add</button>
        </form>
        <ul>
            <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:keys="todo.id"
                v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
        </ul>
    </div>

    <script>
        Vue.component('todo-item', {
            template: '<li class="flex items-center">\
                <span class="w-full">{{ title }} --{{keys}} </span>\
                <button v-on:click="$emit(\'remove\')">X</button>\
                </li>',
            props: ['title', 'keys']
        });
        new Vue({
            el: '#todo-app',
            data: {
                newTodoText: '',
                todos: [
                    { id: 1, title: 'Buy groceries' },
                    { id: 2, title: 'Learn Vue.js' },
                    { id: 3, title: 'Build a todo app' }
                ]
            },
            methods: {
                addNewTodo: function () {
                    if (this.newTodoText.trim()) {
                        this.todos.push({ id: Date.now(), title: this.newTodoText });
                        this.newTodoText = '';
                    }
                }
            }
        }); 
    </script>
</body>

</html>